<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta name="referrer" content="never">
    <meta name="robots" content="noindex, nofollow">
    <meta charset="utf-8">
    <title>合同签名</title>
    <script src="/assets/signature/jquery-3.6.0.min.js"></script>
    <script src="/assets/signature/jSignature.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .main {
            display: flex;
            height: 100vh;
        }

        .main .btns {
            display: flex;
            align-items: center;
            text-align: center;
            height: 100vh;
            width: 60px;
            border-right: 1px solid #e8e8e8;
            /*background: red;*/
        }

        .main .btns .b {
            position: relative;
            width: 100px;
            height: 60px;
            transform: rotate(90deg);
            display: flex;
            justify-content: center;
        }

        .main #signature {
        }

        .qm {
            width: calc(100% - 61px);
            position: relative;
            background: #f9f9f9;
        }

        .qm .di {
            position: absolute;
            top: 0;
            left: 0;
            width: calc(100% - 40px);
            height: calc(100% - 40px);
            z-index: 1;
            padding: 20px;
        }

        .qm .cc {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
        }

        button {
            width: 80px;
            height: 40px;
            border: none;
            font-size: 20px;
            color: #fff;
            border-radius: 5px;
        }
    </style>
</head>

<body>
<div class="main">
    <div class="btns">
        <div class="b">
            <div style="position: absolute;top: 10px;left: -80px;width: 200px">
                <button id="clearBtn" style="background: red;margin-right: 20px">清空</button>
                <!--    <button id="exportBtn">导出图片</button>-->
                <button id="submitBtn" style="background: #67C23A">提交</button>
            </div>
        </div>
    </div>
    <div class="qm">
        <div class="di">
            <div style="border: 1px dashed #e5e5e5;height: 100%;display: flex;justify-content: center;align-items: center">
                <div style="transform: rotate(90deg);font-size: 20px;color: #555">签字区</div>
            </div>
        </div>
        <div class="cc" id="signature"></div>
    </div>
</div>
<script>
    function rotateBase64Image(src, edg, callback) {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        var imgW;//图片宽度
        var imgH;//图片高度
        var size;//canvas初始大小
        if (edg % 90 != 0) {
            console.error("旋转角度必须是90的倍数!");
            throw '旋转角度必须是90的倍数!';
        }
        (edg < 0) && (edg = (edg % 360) + 360)
        const quadrant = (edg / 90) % 4; //旋转象限
        const cutCoor = {sx: 0, sy: 0, ex: 0, ey: 0}; //裁剪坐标
        var image = new Image();
        image.crossOrigin = "anonymous"
        image.src = src;
        image.onload = function () {
            imgW = image.width;
            imgH = image.height;
            size = imgW > imgH ? imgW : imgH;
            canvas.width = size * 2;
            canvas.height = size * 2;
            switch (quadrant) {
                case 0:
                    cutCoor.sx = size;
                    cutCoor.sy = size;
                    cutCoor.ex = size + imgW;
                    cutCoor.ey = size + imgH;
                    break;
                case 1:
                    cutCoor.sx = size - imgH;
                    cutCoor.sy = size;
                    cutCoor.ex = size;
                    cutCoor.ey = size + imgW;
                    break;
                case 2:
                    cutCoor.sx = size - imgW;
                    cutCoor.sy = size - imgH;
                    cutCoor.ex = size;
                    cutCoor.ey = size;
                    break;
                case 3:
                    cutCoor.sx = size;
                    cutCoor.sy = size - imgW;
                    cutCoor.ex = size + imgH;
                    cutCoor.ey = size + imgW;
                    break;
            }
            ctx.translate(size, size);
            ctx.rotate(edg * Math.PI / 180);
            ctx.drawImage(image, 0, 0);
            var imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
            if (quadrant % 2 == 0) {
                canvas.width = imgW;
                canvas.height = imgH;
            } else {
                canvas.width = imgH;
                canvas.height = imgW;
            }
            ctx.putImageData(imgData, 0, 0);
            callback(canvas.toDataURL())
        };
    };
    $(function () {
        var $signature = $("#signature");
        $signature.jSignature({
            "decor-color": "transparent",
            'lineWidth': "5",
            // 'UndoButton': true,
            "height": "100%",
            "width": "100%",
        });
        $("#clearBtn").click(function () {
            $signature.jSignature("reset");
        });
        $("#exportBtn").click(function () {
            var dataUrl = $signature.jSignature("getData");
            var link = document.createElement("a");// 创建一个虚拟链接
            link.href = dataUrl;
            link.download = "signature.png"; // 设置下载的文件名，可以根据需要进行修改
            link.click();// 执行点击事件触发下载
        });
        $("#submitBtn").click(function () {
            if ($("#signature").jSignature("getData", "native").length == 0) {
                alert('请先进行签名后，再次提交')
                return false;
            }
            var dataUrl = $signature.jSignature("getData");
            rotateBase64Image(dataUrl, 270, (res) => {
                // 发送数据
                $.ajax({
                    url: "{:url('/index/index/saveImage')}",
                    method: "POST",
                    data: {
                        image: res,
                        customer_id: '{$customer_id}',
                    },
                    success: function ({msg}) {
                        alert(msg)
                        window.location.href = "{:url('/index/index/signature/customer_id/'.$customer_id)}"
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            })


        });
    });
</script>
</body>

</html>
